<template>
    <div>
        <div class="approval_nav">
            <div>
                <router-link class="yuangong " to="/approvalmanager/ApproveYuangong">员工</router-link>
                <router-link class="yuangong " to="/approvalmanager/Aprovetiaoke">调课</router-link>
                <router-link class="xuesheng  addcolcr" to="/approvalmanager/ApproveHuanke">换课</router-link>
            </div>
            <div class="seach">

                <el-input  class="inputseach" v-model="inputname" :value="inputname"
                    @keyup.enter.native="getname" placeholder="请输入申请人姓名"></el-input>
                <el-input  class="inputseach" v-model="inputteach" :value="inputteach"
                    @keyup.enter.native="getteach" placeholder="请输入指向老师"></el-input>
                <el-input class="inputseach" v-model="inputclass" :value="inputclass"
                    @keyup.enter.native="getclass" placeholder="请输入申请课程"></el-input>
                <el-button  @click="getinput" type="primary" icon="el-icon-search" style="background-color:#106ab1 ;">搜索</el-button>
            </div>
        </div>
        <div>
            <div class="Reassignment">
                <el-table :data="tableData" style="width: 100% ">
                    <el-table-column prop="changeOriginalTeacherId" label="申请老师">
                    </el-table-column>
                    <el-table-column prop="changeNewsTeacherId" label="指向老师">
                    </el-table-column>
                    <el-table-column prop="changeOriginalSubjectId" label="申请课程">
                    </el-table-column>
                    <el-table-column prop="changeNewsSubjectId" label="指向课程">
                    </el-table-column>
                    <el-table-column prop="changeOriginalClassId" label="申请班级">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" :content="tableData[scope.$index].changeOriginalClassId"
                                placement="right-end">
                                <span class="tooitp">{{ tableData[scope.$index].changeOriginalClassId }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="changeNewsClassId" label="指向班级">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" :content="tableData[scope.$index].changeNewsClassId"
                                placement="right-end">
                                <span class="tooitp">{{ tableData[scope.$index].changeNewsClassId }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="changeOriginalWeekId" label="原上课时间" width="100px">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" :content="tableData[scope.$index].changeOriginalWeekId"
                                placement="right-end">
                                <span class="tooitp">{{ tableData[scope.$index].changeOriginalWeekId }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="changeNewsWeekId" label="换课时间" width="100px">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" :content="tableData[scope.$index].changeNewsWeekId"
                                placement="right-end">
                                <span class="tooitp">{{ tableData[scope.$index].changeNewsWeekId }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="changeCreatetime" label="申请时间" width="100px">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="light" :content="tableData[scope.$index].changeCreatetime"
                                placement="right-end">
                                <span class="tooitp">{{ tableData[scope.$index].changeCreatetime }}</span>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="changeStatus" label="审批状态" width="100px">
                        <template slot="header" slot-scope="scope">
                            <el-dropdown @command="siftuser">
                                <span class="el-dropdown-link">
                                    审批状态<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command=3>全部</el-dropdown-item>
                                    <el-dropdown-item command=0>未审批</el-dropdown-item>
                                    <el-dropdown-item command=1>通过</el-dropdown-item>
                                    <el-dropdown-item command=2>未通过</el-dropdown-item>

                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>

                        <!-- <template slot-scope="scope">
                             <button @click="handleClick(scope.row.status)" >aaa</button>
                            <span v-if="scope.row.status == 0">未审批</span>
                            <span v-if="scope.row.status == 1" style="color: #6aad39;">通过</span>
                            <span v-if="scope.row.status == 2" style="color: #fe0000;">未通过</span>
                        </template> -->
                    </el-table-column>

                    <el-table-column prop="userId" label="审批人">
                    </el-table-column>
                    <el-table-column prop="changeStatus" label="操作" class="caobtn" width="150px">
                        <template slot-scope="scope">
                            <el-button :type="scope.row.changeStatus == 0 ? 'success' : 'info'" @click="tongguo(scope.row)"
                                size="small" style="background-color:green">通过</el-button>
                            <el-button :type="scope.row.changeStatus == 0 ? 'danger' : 'info'" @click="notongguo(scope.row)"
                                size="small" style="background-color:red">不通过</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
            <div class="fenye_tou">
                <el-pagination  layout="prev, pager, next" :page-count="yeshu" :page-size="pageSize" :current-page.sync="pageIndex"
                    @current-change="Switchpages" class="fenye">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            baseUrl: require("../js/baseUrl.js").baseUrl,
            inputname: '',//姓名搜索
            inputteach: '',//老师搜索
            inputclass: '',//课程搜索
            yeshu: 1,//总页数
            tableData: [],//表格的数据
            pageIndex: 1,//第几页
            pageSize: 6,//每页有几条数据
            status:"",//审批状态
            username:"",
            userId:Number(sessionStorage.getItem("userId"))
        }
    },

    methods: {
          //通过按钮
          tongguo(row) {
            /* console.log(row) */
            
                let chaId = row.changeId
                let status = 1
                this.Passanddont(chaId, status)
            
        },
        notongguo(row) {
           
                let chaId = row.changeId
                let status = 2
                this.Passanddont(chaId, status)

            
        },
        //通不通过的接口
        Passanddont(chaId, status) {
            this.$http.post(this.baseUrl + "approval/changeApproval", {
                changeId: chaId,
                changeStatus:status,
                userId:this.userId
            }).then(res => {
                    /*  console.log(res) */
                this.getChangeclasses()
            })
        },

        //搜索
        getinput() {
            this.pageindex = 1
            this.getChangeclasses()
        },
        //姓名搜索
        getname() {
            this.pageindex = 1
            this.getChangeclasses()
        },
        //教师搜索
        getteach() {
            this.pageindex = 1
            this.getChangeclasses()
        },
        //申请课程搜索
        getclass() {
            this.pageindex = 1
            this.getChangeclasses()
        },
        //分页
        Switchpages(pageinde) {
            this.pageIndex = pageinde
            this.getChangeclasses()
        },
        //审批筛选
        siftuser(status) {
            if(status ==3){
                status=""
                this.status = status
            }else{
                this.status = status
            }
            this.pageindex = 1
            
            this.getChangeclasses()
        },
        getChangeclasses() {
            if (this.status == 3) {
                this.$http.post(this.baseUrl + "approval/changeApprovalList", {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    changeOriginalTeacherId: this.inputname,
                    changeNewsTeacherId:this.inputteach,
                    changeOriginalSubjectId:this.inputclass,
                    changeStatus:this.status
                }).then(res => {
                    /* console.log(res) */
                    if (res.data.code == 200) {
                        this.tableData = res.data.data.approvalList
                        this.yeshu = res.data.data.pageCount
                    }
                })
            } else if(this.inputname || this.inputteach || this.inputclass || this.status) {
                /* console.log(this.inputteach,) */
                this.$http.post(this.baseUrl + "approval/changeApprovalList", {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    changeOriginalTeacherId: this.inputname,
                    changeNewsTeacherId:this.inputteach,
                    changeOriginalSubjectId:this.inputclass,
                    changeStatus:this.status
               
            }).then(res => {
               
                console.log(res)
                if (res.data.code == 200) {
                    this.tableData = res.data.data.approvalList
                    this.yeshu = res.data.data.pageCount
                }
            })
            }else{
                this.$http.post(this.baseUrl + "approval/changeApprovalList", {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                userId:Number(sessionStorage.getItem("userId"))
            }).then(res => {
                /* console.log(res) */
                if (res.data.code == 200) {
                    this.tableData = res.data.data.approvalList
                        this.yeshu = res.data.data.pageCount
                }
            })
            }
           
        }
    },
    mounted() {
        this.getChangeclasses()
    }
}
</script>
<style lang="less">
.Reassignment {

    .tooitp {
        display: inline-block;
        width: 60px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .el-table .el-table__cell {
        padding: 3px 0 !important;
    }

    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
        text-align: center;
    }

    .el-table::before {
        background-color: #f3f8fd;
    }

    .el-table__row {
        border-radius: 30px !important;
    }

    .el-table * {
        border: none !important;
    }

    .el-table .el-table__body {
        border-spacing: 0 15px;
    }

    .el-table th.el-table__cell {
        background: #f3f8fd;

    }

    .el-table {
        background: transparent;
    }
}
</style>